<script>
  /**
   * 首次进入会下载
   * 页面跳转如果符合一定条件 会下载
   * 24小时未更新 且 worker触发事件 会下载
   *
   * 下载后 只有 worker未安装过 或 文件有更新 才会重新安装
   *
   * 【 --- 单纯的刷新页面：并不会下载，更不会安装，所以看不到首行log输出 --- 】
   *
   * 成功安装后，如果是第一次安装将激活worker。
   * worker in waiting：如果当前已有激活的worker，安装会发生在后台 并处于waiting状态
   * active worker：只到所有相关页面都不再使用旧版本（那不就是所有页面都关闭了吗？），才激活新安装的worker
   *
   * download -- install -- active
   *
   * 这个等待过程不友好，于是有了：跳过等待 + 旧页面提醒
   * skipWaiting() + clients.claim()
   * */
  navigator.serviceWorker.register('./service-worker.js', { name: 'test' }).then((regis) => {
    console.dir(regis);
    console.log('当前正在安装的serviceWorker：', regis.installing);
    console.log(regis.scope);
  });
  navigator.serviceWorker.addEventListener('controllerchange', (e) => {
    //
    console.log('Client Listen: controllerchange');
  });

  fetch('/api/hero?name=Zhou&age=9999', { mode: 'cors', method: 'get' });
  fetch('/api/hero', {
    // https://api.zyl.com
    method: 'post',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ name: 'zhou', age: 9998 }),
  });
  fetch('/api/hero/1', {
    method: 'put',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ name: 'zhou', age: 9997 }),
  });

  // const ws1 = new WebSocket('ws://127.0.0.1:1241/my-ws/client/123/to/456');
  // websocket 只能使用GET请求创建ws连接，所以不能携带body。
  // 经过测试，路径无法携带参数，路径必须是固定的。
  // 目前唯一可以携带参数的就是query
  const ws = new WebSocket('ws://127.0.0.1:1241/ws/client?from=123&to=456');

  ws.onopen = (e) => {
    console.log('on open', e);
    ws.send('hello');
    console.log('---after send ---');
  };

  ws.onmessage = (e) => {
    console.log('msg:', e);
  };
</script>
